<template>
	<view class="search-page">
		<!-- 搜索头部 -->
		<view class="search-header">
			<view class="search-input-container">
				<uni-icons type="search" size="16" color="#999" class="search-icon"></uni-icons>
				<input class="search-input" type="text" placeholder="搜索商品" placeholder-style="color: #999;"
					v-model="searchKeyword" @confirm="handleSearch" />
			</view>
			<text class="cancel-btn" @click="handleCancel">取消</text>
		</view>

		<!-- 搜索历史 -->
		<view class="search-history" v-if="showHistory">
			<view class="section-header">
				<text class="section-title">搜索历史</text>
				<view class="clear-btn" @click="clearHistory">
					<uni-icons type="trash" size="14" color="#999"></uni-icons>
					<text> 清空</text>
				</view>
			</view>
			<view class="history-tags">
				<view class="history-tag" v-for="(item, index) in historyList" :key="index"
					@click="searchHistory(item)">
					{{item}}
				</view>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="hot-search">
			<view class="section-header">
				<text class="section-title">热门搜索</text>
			</view>
			<view class="hot-search-list">
				<view class="hot-search-item" v-for="(item, index) in hotSearchList" :key="item.keyword"
					@click="searchHot(item.keyword)">
					<view class="hot-search-rank" :class="{'top-3': index < 3}">{{index + 1}}</view>
					<view class="hot-search-content">
						<view class="hot-search-keyword">
							{{item.keyword}}
							<text class="hot-search-tag" v-if="item.tag">{{item.tag}}</text>
						</view>
						<view class="hot-search-heat">搜索指数: {{item.heat}}万</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 搜索关键词
	const searchKeyword = ref('')
	// 是否显示历史记录
	const showHistory = ref(true)

	// 历史记录列表
	const historyList = ref([
		'便携式蓝牙音箱',
		'保温杯',
		'收纳盒',
		'化妆品',
		'充电宝'
	])

	// 热门搜索列表
	const hotSearchList = ref([{
			keyword: '便携式蓝牙音箱',
			heat: '9.8',
			tag: '热'
		},
		{
			keyword: '保温杯',
			heat: '8.5',
			tag: '新'
		},
		{
			keyword: '收纳盒',
			heat: '7.2'
		},
		{
			keyword: '化妆品',
			heat: '6.8'
		},
		{
			keyword: '充电宝',
			heat: '5.9'
		},
		{
			keyword: '耳机',
			heat: '5.3'
		},
		{
			keyword: '文具',
			heat: '4.7'
		},
		{
			keyword: '零食',
			heat: '4.2'
		},
		{
			keyword: '玩具',
			heat: '3.8'
		},
		{
			keyword: '背包',
			heat: '3.5'
		}
	])

	// 搜索方法
	const handleSearch = () => {
		if (searchKeyword.value.trim()) {
			// 添加到历史记录
			if (!historyList.value.includes(searchKeyword.value)) {
				historyList.value.unshift(searchKeyword.value)
				// 最多保留10条历史记录
				if (historyList.value.length > 10) {
					historyList.value.pop()
				}
			}
			// 执行搜索逻辑
			doSearch(searchKeyword.value)
		}
	}

	// 搜索历史记录
	const searchHistory = (keyword) => {
		searchKeyword.value = keyword
		doSearch(keyword)
	}

	// 搜索热门关键词
	const searchHot = (keyword) => {
		searchKeyword.value = keyword
		doSearch(keyword)
	}

	// 清空历史记录
	const clearHistory = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清空搜索历史吗？',
			success: (res) => {
				if (res.confirm) {
					historyList.value = []
				}
			}
		})
	}

	// 取消搜索
	const handleCancel = () => {
		uni.navigateBack()
	}

	// 实际搜索方法
	const doSearch = (keyword) => {
		showHistory.value = false
		// 这里可以跳转到搜索结果页或执行其他搜索逻辑
		console.log('搜索关键词:', keyword)
		uni.showToast({
			title: `搜索: ${keyword}`,
			icon: 'none'
		})
	}
</script>

<style lang="scss" scoped>
	.search-page {
		padding: 10px 15px;
		background-color: #fff;
		min-height: 100vh;
	}

	.search-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;

		.search-input-container {
			flex: 1;
			position: relative;
			margin-right: 10px;

			.search-input {
				width: 100%;
				height: 36px;
				background-color: #f5f5f5;
				border-radius: 18px;
				border: none;
				padding: 0 15px 0 35px;
				font-size: 14px;
			}

			.search-icon {
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.cancel-btn {
			font-size: 14px;
			color: #ff6a6a;
		}
	}

	.search-history {
		margin-bottom: 20px;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;

			.section-title {
				font-size: 15px;
				font-weight: bold;
				color: #333;
			}

			.clear-btn {
				font-size: 13px;
				color: #999;
				display: flex;
				align-items: center;
			}
		}

		.history-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;

			.history-tag {
				padding: 6px 12px;
				background-color: #f5f5f5;
				border-radius: 15px;
				font-size: 13px;
				color: #333;
			}
		}
	}

	.hot-search {
		margin-bottom: 20px;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;

			.section-title {
				font-size: 15px;
				font-weight: bold;
				color: #333;
			}
		}

		.hot-search-list {
			.hot-search-item {
				display: flex;
				align-items: center;
				padding: 10px 0;
				border-bottom: 1px solid #eee;

				.hot-search-rank {
					width: 20px;
					margin-right: 10px;
					text-align: center;
					font-weight: bold;
					font-size: 14px;
					color: #999;

					&.top-3 {
						color: #ff6a6a;
					}
				}

				.hot-search-content {
					flex: 1;

					.hot-search-keyword {
						font-size: 14px;
						margin-bottom: 3px;
					}

					.hot-search-heat {
						font-size: 12px;
						color: #999;
					}

					.hot-search-tag {
						font-size: 11px;
						padding: 1px 5px;
						border-radius: 3px;
						background-color: rgba(255, 106, 106, 0.1);
						color: #ff6a6a;
						margin-left: 5px;
					}
				}
			}
		}
	}
</style>